<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>行业转化词(百度数据)</title>
<script type="text/javascript"	src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
<script type="text/javascript"	src="${pageContext.request.contextPath}/js/jquery/jquery-ui/jquery-ui.js"></script>

<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/bootstrap-table.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/tableExport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/table-export.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/jquery.base64.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js"	type="text/javascript"></script>
<script	src="${pageContext.request.contextPath}/ui/layui/lay/modules/laydate.js" type="text/javascript"></script>
<script	src="${pageContext.request.contextPath}/ui/layui/lay/modules/layer.js"	type="text/javascript"></script>
<script	src="${pageContext.request.contextPath}/ui/layui/lay/modules/form.js"	type="text/javascript"></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/modules/laydate/laydate.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/jquery-css/jquery-ui.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap-css/bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/table/bootstrap-table.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/layui.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/global.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/modules/layer/default/layer.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/modules/code.css">


<style>
.container {
	width: 85%;
}

.modal-industry {
	width: 700px;
}

.modal-body {
	max-height: 750px
}

.modal-body-industry {
	height: 450px;
}
.div-inline{ display:inline}

.text{  
    padding:0;  
    border:0;  
    width: 120px; 
    height: 35px;  
}  
.but{  
    border:0;  
    padding: 0;  
    width: 60px;  
    height: 29px;   
}
span{  
    float: left;  
}
</style>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  var startTime = {
     min: '1970-01-01 23:59:59'
    ,max: laydate.now(-1)
    ,isyes: true
    
  };
  var endTime = {
		     min: '1970-01-01 23:59:59'
		    ,max: laydate.now()
		    ,isyes: true
		    
		  };
  document.getElementById('start_time').onclick = function(){
	startTime.elem = this
    laydate(startTime);
  }
  document.getElementById('end_time').onclick = function(){
		endTime.elem = this
	    laydate(endTime);
	  }
  
});
</script>

</head>
<body>
	<%@include file="/webpage/frame/top.jsp"%>
	<div class="container">
		<div id="topContent" class="layui-form-pane">
			<div class="layui-form-item" style="margin-bottom: 0px;">
				<div class="div-inline">
					<!-- <label class="div-inline"></label> -->
					<span><input type="button" class="but btn btn-primary btn-xs"
						value="按日期查询" onclick="getbytime();"></span>
						<span><input type="text" class="text" style="margin-left: 3px" name="ptime" id="start_time" placeholder="开始时间"></span>
						<span><input type="text" class="text" style="margin-left: 3px" name="endtime" id="end_time" placeholder="结束时间"></span>
				</div>
				<div class="div-inline" style="margin-left: 90px; float:right">
						<span><input type="button" class="but btn btn-primary btn-xs"
						value="按行业查询" disabled="disabled" style="margin-left: 80px"></span>
						<span><select id="industrySel" lay-verify="" lay-search
								style="margin-left: 3px;">
						</select></span>
				</div>
			</div>
			<div align="left">
				<p class="toolbar">
					<button type="button" class="export-excel btn btn-primary btn-xs"
						data-table="#companytable">导出Excel</button>
				</p>
			</div>

			<table id="companytable" data-show-refresh="true" data-search="true"
				data-click-to-select="true" data-query-params="queryParams"
				data-pagination="true" data-toolbar=".toolbar"
				data-show-export="true" data-export-types="['excel']"
				data-export-options='{"fileName": "products", "worksheetName": "products"}'
				data-sort-name="conversionRate" data-sort-order="desc"
				data-show-columns="false">
				<thead>
					<tr>
						<th data-field="id" data-show="true" data-visible="false">id</th>
						<th data-field="keywordSearch">关键词</th>
						<th data-field="conversionRate" data-sortable="true">转化率</th>
						<th data-field="conversionCost" data-sortable="true">转化成本</th>
						<th data-field="numberClick" data-sortable="true">点击量</th>
						<th data-field="totalnumberConsult" data-sortable="true">咨询量</th>
						<th data-field="consume" data-sortable="true">消费</th>
						<!-- <th data-field="promotionDate" data-sortable="true">时间</th> -->
						<!-- <th data-field="promotionDate" data-sortable="true">时间</th> -->

					</tr>
				</thead>

			</table>
			<font color="#FF0000">注：转化成本为-1表示无穷大</font>
		</div>

		<script>
	

	
	var $table =$('#companytable');
	var initIndustryId;
		//延迟加载 
		$(function() {
			 TableExport.init();
		    	//导出按钮
		    	$('#export').click(function () {
		    	  	$table.tableExport({
		    	      type: 'excel',
		    	      escape: false
		    	    });
		    	  });
		    	$.get(
						"${pageContext.request.contextPath}/industryController.do?getAllIndustry",
						function(result) {
							var data = $.parseJSON(result);
							initIndustryId = data[0]["id"];
							var API_URL = '${pageContext.request.contextPath}/industryKeywordController.do?getKeyInfoByIndustry&startTime='+""+'&endTime='+""+'&industryId='+initIndustryId;
							//加载公司列表
							$table.bootstrapTable({
								url : API_URL,
								pageSize : 25,
								pageList : [ 15, 25, 100, 500 ],
							}), 
							$modal = $('#modal').modal({show : false}), 
							$alert = $('.alert').hide(), 
							$alert_input = $('.alert_input').hide();
						});
			//加载全部行业
			loadIndustry();
		});
		//按日期查询
		function getbytime(){
			var startTime = $('#start_time').val();
			var endTime = $('#end_time').val();
			var initIndustryId = $("#industrySel").val();
			var API_URL = '${pageContext.request.contextPath}/industryKeywordController.do?getKeyInfoByIndustry&industryId='+initIndustryId+'&endTime='+endTime+'&startTime='+startTime;
			$table.bootstrapTable('refresh', {url: API_URL}); 
		}
		
		//加载全部行业
		function loadIndustry() {
			$.get("${pageContext.request.contextPath}/industryController.do?getAllIndustry",
						function(result) {
							var data = $.parseJSON(result);
							initIndustryId = data[0]["id"];
							for (i = 0; i < data.length; i++) {
								$("#industrySel").append(
										"<option value='"+data[i]["id"]+"'>"+ data[i]["industry"]+ "</option>");
								}
							});
		}

		//按行业搜索
		$("#industrySel").change(function() {
			var checkValue = $("#industrySel").val();
			loadTableData(checkValue);
		});

		function loadTableData(checkValue) {
			var startTime = $('#start_time').val();
			var endTime = $('#end_time').val();
			var API_URL = '${pageContext.request.contextPath}/industryKeywordController.do?getKeyInfoByIndustry&industryId='+checkValue+'&endTime='+endTime+'&startTime='+startTime;
			$table.bootstrapTable('refresh', {url: API_URL}); 
		}
	</script>
		<%@include file="/webpage/frame/bottom.jsp"%>
</body>
</html>